<template>
  <div id="app">
    <h3>------App内容------</h3>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>

    <h3>------App内容: getters相关信息------</h3>
      <h2>{{$store.getters.powerCounter }}</h2>
      <h2>{{$store.getters.more20stu}}</h2>
      <h2>{{$store.getters.more20stuLength}}</h2>
      <!-- 获取年龄()岁学生 -->
      <h2>{{$store.getters.moreAgeStu(15)}}</h2>
    <h3 class="v1">------App内容: info对象内容是否是响应式------</h3>
      <h2>{{$store.state.info}}</h2>
      <button @click="updateInfo">修改信息</button>

    <h3>------Hello Vuex内容------</h3>
    <Hello-Vuex />
  </div>
</template>

<script>
import HelloVuex from '@/components/HelloVuex'
import {INCREMENT} from './store/mutations-types'

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    data() {
      return {
        message: '我是App组件',
        // counter: 0
      }
    },
    // computed: {
    //   more20stu() {
    //     // this.管家.状态.集合.
    //     return this.$store.state.students.filter(s => {
    //       return s.age < 4
    //     })
    //   }
    // },
    methods: {
      addition() {
        this.$store.commit(INCREMENT)
      },
      subtraction() {
        this.$store.commit('decrement')
      },
      addCount(count) {
        // payload:负载
        // 1.普通提交
        this.$store.commit('incrementCount', count)
        // 2.特殊提交
        this.$store.commit({
          type: 'incrementCount',
          // count
        })
      },
      addStudent() {
        const stu = {id: 143, name: 'youe', age: 35}
        this.$store.commit('addStudent', stu)
      },
      updateInfo() {
        this.$store.commit('updateInfo')
      }
    }
  }
</script>

<style>
  .v1{
    color:red;
  }
</style>
